<template>
  <div class="search">
    <!-- 头部搜索框 -->
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      background="#3296fa"
      @search="onSearch"
      @input="think"
    >
      <template #action>
        <span ref="cancel" class="canclebtn" @click="onCancel($event)">取消</span>
      </template>
    </van-search>
    <!-- 联想区域 -->
    <van-cell-group v-if="thinkList.length !== 0">
      <van-cell title="联想区域" />
      <van-cell
        v-for="(item, index) in thinkList"
        :key="index"
        icon="search"
        @click="onSearch(item.oldItem)"
      >
        <template #title>
          <span v-html="item.newItem"></span>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 搜索历史区域 -->
    <van-cell-group v-else>
      <van-cell title="搜索历史">
        <template #default>
          <van-icon name="delete" @click="delAll" />
        </template>
      </van-cell>
      <van-cell
        icon="search"
        :title="item"
        v-for="(item, index) in historyList"
        :key="index"
        @click="onSearch(item)"
      >
        <template #default>
          <van-icon @click.stop="delItem(index)" name="cross" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
// 导入方法
import { apiThink } from '@/api/other.js'
import { localSet, localGet, localDel } from '@/utils/mylocal.js'
export default {
  data () {
    return {
      value: '', // 搜索框中双向绑定的数据源
      thinkList: [], // 联想的数据源
      timer: null, // 防抖的定时器
      historyList: localGet('history') || [] // 搜索历史
    }
  },
  methods: {
    // 将来输入内容之后，点击完成按钮会触发（PC:回车来模拟）
    onSearch (value) {
      // 跳转到搜索页面
      this.$router.push(`/searchResult/${value}`)
      // 将搜索的数据保存到数组中
      this.historyList.unshift(value)
      // 数组的去重
      this.historyList = [...new Set(this.historyList)]
      // 将搜索数据保存到本地中
      localSet('history', this.historyList)
    },
    // 点击取消按钮时触发
    onCancel (e) {
      if (e.target.innerHTML === '取消') {
        this.value = ''
        this.think()
        this.$refs.cancel.innerHTML = '返回'
      } else {
        this.$refs.cancel.innerHTML = '取消'
        this.$router.push({ path: '/index' })
      }
    },
    // 联想操作
    think () {
      // 判断搜索内容是否为空
      if (this.value.length === 0) {
        // 将联想内容清空
        this.thinkList = []
        // 不执行后续的代码
        return
      }
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        // 得到输入框中的关键字: this.value
        // 发送请求到服务器，得到与关键字相关的数据
        const res = await apiThink(this.value)
        //   this.thinkList = res.data.data.options
        // 遍历数据源，将关键字用 span 包起来
        this.thinkList = res.data.data.options.map(item => {
          return {
            oldItem: item,
            newItem: item.replace(
              this.value,
              `<span style="color: red">${this.value}</span>`
            )
          }
        })
      }, 500)
    },
    // 删除单条历史
    delItem (index) {
      this.historyList.splice(index, 1)
      // 重新把数据保存起来
      localSet('history', this.historyList)
    },
    // 删除所有历史
    delAll () {
      this.$dialog
        .confirm({
          title: '警告',
          message: '是否清除数据'
        })
        .then(() => {
          // 将历史数据清空
          //   清空 historyList
          this.historyList = []
          //   清除 localstorage
          localDel('history')
        })
        .catch(() => {
          console.log('取消')
        })
    }
  }
}
</script>

<style scoped lang="less">
.search {
  .canclebtn {
    color: #fff;
  }
  /deep/ .van-search__action:active {
    background-color: green;
  }
}
</style>
